<template>
  <div>
    <!-- //大盒子 -->

    <div class="div_big">
      <!-- 大照片 -->
       
      <div style="width:30%;height:86vh;flaot:left;">
        <h1>京东</h1>
        <br />
        <div class="div_img_big">
          <img :src="img[scroll]" width="100%" alt="" />
        </div>

        <!-- 下方轮播图 -->
        <div class="div_img_little">
          <!-- 左按钮 -->
          <div @click="onclickLeft">
            <span
              style="font-size:40px;width:20%;height:100%"
              class="el-icon-arrow-left"
            ></span>
          </div>

          <!-- 轮播图 -->
          <div class="div_img_center">
            <div class="div_img">
              <div
                @mouseenter="seenter(index)"
                ref="center"
                class="div_center_img"
                :class="scroll === index ? 'img_border' : ''"
                v-for="(item, index) in img"
                :key="index"
              >
                <img :src="item" alt="" />
              </div>
            </div>
          </div>

          <!-- 右按钮 -->
          <div @click="onclickRight">
            <span
              style="font-size:40px;width:20%;height:100%"
              class="el-icon-arrow-right"
            ></span>
          </div>
        </div>
      </div>
      <!-- ///// -->
      <!-- ///// -->
      <!-- ///// -->
      <!-- 分隔线 -->
      <!-- 分隔线 -->
      <!-- 分隔线 -->
      <!-- 分隔线 -->
      <!-- 分隔线 -->
      <!-- ///// -->
      <!-- ///// -->
      <!-- ///// -->
      <div class="div_title">
        <div style="width:55%;height:86vh;flaot:left;">
          <h1>淘宝</h1>
          <br />
          <div class="div_img_big">
            <img :src="imgs[huadong]" width="100%" alt="" />
          </div>

          <!-- 下方轮播图 -->
          <div class="div_img_little">
            <!-- 左按钮 -->
<div  style="width:24%;height:100%"></div>
            <!-- 轮播图 -->

            <div class="div_img">
              <div
                @mouseenter="seenter1(index)"
                ref="center"
                class="div_center_img"
                :class="huadong === index ? 'img_border' : ''"
                v-for="(item, index) in imgs"
                :key="index"
              >
                <img :src="item" alt="" />
              </div>
            </div>

            <!-- 右按钮 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      scroll: 0,
      huadong: 0,
      img: [
        'http://localhost:8080/素材/img/photo.jpg',
        'http://localhost:8080/素材/img/2.jpg',
        'http://localhost:8080/素材/img/photo.jpg',
        'http://localhost:8080/素材/img/2.jpg',
        'http://localhost:8080/素材/img/photo.jpg',
        'http://localhost:8080/素材/img/16.jpg',
        'http://localhost:8080/素材/img/mi6.jpg',
        'http://localhost:8080/素材/img/11.jpg',
        'http://localhost:8080/素材/img/9.jpg',
      ],
      imgs: [
        'http://localhost:8080/素材/img/16.jpg',
        'http://localhost:8080/素材/img/mi6.jpg',
        'http://localhost:8080/素材/img/11.jpg',
      ],
    }
  },
  methods: {
    onclickRight() {
      //声明到第几条数据
      this.scroll += 3
      //判断
      if (this.scroll >= this.img.length) {
        this.scroll = this.img.length - 1
      }
      console.log(this.scroll)
      var refs = this.$refs.center
      refs[this.scroll].scrollIntoView({
        behavior: 'smooth',
        inline: 'start',
      })
    },
    onclickLeft() {
      //声明到第几条数据
      this.scroll -= 3
      //判断
      if (this.scroll <= 0) {
        this.scroll = 0
      }
      console.log(this.scroll)
      var refs = this.$refs.center
      refs[this.scroll].scrollIntoView({
        behavior: 'smooth',
        inline: 'start',
      })
    },
    seenter(index) {
      this.scroll = index
    },
    seenter1(index) {
      this.huadong = index
    },
  },

  mounted() {
    this.list = this.$route.query.item
  },
}
</script>

<style>
.div_title {
  width: 55%;
  margin-left: 10%;
  height: 86vh;
  float: left;
}
.div_img_center::-webkit-scrollbar {
  display: none;
}
.div_center_img img {
  width: 100%;
  height: 90%;
  float: left;
}
.div_center_img {
  width: 5.4vw;
  height: 90%;
  margin-top: 0.3%;
  margin-left: 1vw;
  float: left;
}
.img_border {
  border: 2px solid red;
}
.div_img {
  width: 58.5vw;

  height: 100%;
}
.div_img_center {
  width: 80%;
  height: 100%;
  overflow: scroll;
}

.div_img_little {
  width: 100%;
  height: 12vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-top: 1px solid rgb(230, 230, 230);
}
.div_img_big {
  width: 100%;
  height: 60vh;

  background: rgb(255, 255, 255);
}
.div_big {
  margin-left: 20%;
  width: 80%;
  height: 86vh;
  float: left;
  display: inline-flex;
}

</style>
